<html>
<head>
<link rel="stylesheet" href="tabs.css" type="text/css" />
<link rel="stylesheet" href="grey_tabs.css" type="text/css" />
<script type="text/javascript" src="../../os3jslib/liwe.js" type="text/javascript"></script>
<script type="text/javascript" src="../../os3jslib/object_enh.js" type="text/javascript"></script>
<script type="text/javascript" src="../../os3jslib/array_enh.js" type="text/javascript"></script>
<script type="text/javascript" src="../../os3jslib/string_enh.js" type="text/javascript"></script>
<script type="text/javascript" src="tabs.js" type="text/javascript"></script>
<script type="text/javascript">
var tabs;

function init ()
{
	tabs = new OS3Tabs.instance ( 'tabs' );
	tabs.add ( 'G1 - Main tab', 'g1_tab1' );
	tabs.add ( 'G1 - Second tab', 'g1_tab2' );
	tabs.add ( 'G1 - Third tab', 'g1_tab3' );

	tabs.set_group ( 'second' );
	tabs.add ( 'G2 - Main tab', 'g2_tab1' );
	tabs.add ( 'G2 - Second tab', 'g2_tab2' );

	tabs.set_group ( 'third' );
	tabs.add ( 'TERZO', 'g2_tab3' );

	tabs.set_group ( 'second' );
	tabs.add ( 'AGGIUNTO', 'g2_tab1' );

	// tabs.set_event ( 'btn_down', function ( a, b, c, d ) { alert ( a ); } );

	tabs.tab_width = "120px";
	tabs.render ();

	tabs.enable_tab ( 'g2_tab2', false );

	tabs.set_event ( 'click', function () { $( 'eventlog' ).innerHTML += 'click<br>'; } );
	tabs.set_event ( 'click_disabled', function () { $( 'eventlog' ).innerHTML += 'click disabled<br>'; } );
}

function change_title()
{
	tabs.set_tab_title ( 'New Title!', 'default', 0 );
}

function block_event ()
{
	if ( tabs._is_btn_down_blocked )
	{
		tabs.block_event ( 'btn_down', false );
		tabs._is_btn_down_blocked = false;
	} else {
		tabs.block_event ( 'btn_down' );
		tabs._is_btn_down_blocked = true;
	}
}

function sel_two ()
{
	tabs.send_event ( 'g1_tab2', 'click' );
}
</script>

</head>
 <body onload="init()">

<div class="os3tabs">
	<div class="os3tabs_header" id="tabs_header"></div>
	<div id="tabs_barra" style="height: 20px; background-color: black;"></div>
	<div class="os3tabs_body"   id="tabs_body">
		<div class="tab" id="g1_tab1"><h1>G1 - Tab 1</h1></div>
		<div class="tab" id="g1_tab2">G1 - Tab 2</div>
		<div class="tab" id="g1_tab3">G1 - Tab 3</div>
		<div class="tab" id="g2_tab1">G2 - Tab 1</div>
		<div class="tab" id="g2_tab2">G2 - Tab 2</div>
		<div class="tab" id="g2_tab3">G2 - Tab 3</div>
	</div>
</div>

<a href="javascript:change_title('New Title!','default',0)">Change Title</a>
<a href="javascript:sel_two('default',0)">Select tab 2</a>
<a href="javascript:block_event()">Block btn_down</a>

<p>Log eventi:</p>
<div id="eventlog" style="width:400px; height:300px; overflow: scroll"></div>

</body>
</html>
